function lan(title) {
	return this.$mapping.J_i18n(title, title, 'demo.custom')
}

//页面渲染配置相关 如表单组件
export default {
	main(tree) {
		const area = tree.initArea({
			title: '输入框'
		})
		const tpl = tree.initTpl(area)
		area.add(
			area.jsInput({
				label: '普通框框',
				name: 'input1',
				rule: ['required']
			})
		)

		area.add(tpl.pcInput('模板引入', 'input2'))

		area.add(
			area.jsInput({
				label: '数值校验',
				name: 'input3',
				rule: ['required', 'number']
			})
		).add(
			area.jsInput({
				label: '使用插槽',
				name: 'field4',
				span: 16
			}, [
				area.jsChildren({
					is: 'span',
					slot: 'prepend',
					innerText: 'http://'
				}),
				area.jsChildren({
					is: 'span',
					slot: 'append',
					innerText: '.com'
				})
			])
		).add(
			area.jsInputNumber({
				label: '默认计数',
				name: 'inputNumber0'
			}),
			area.jsInputNumber({
				label: '按钮位置',
				name: 'inputNumber1',
				'controls-position': 'right'
			})
		).addNode(
			area.jsInput({
				label: '监听变化',
				name: 'input5',
				placeholder: '输入内容，监听变化',
				watch: nValue => {
					nValue && this.$alert(`输入框内容:${nValue}`)
				},
				style: {
					marginRight: '.5rem'
				}
			}), area.jsButton({
				innerText: '搜索',
				type: 'primary',
				//searchButton类型,会触发列表页的filter事件,触发列表搜索
				buttonType: 'searchButton',
			})
		).add(
			area.jsInput({
				label: '文本域框',
				name: 'input6',
				placeholder: '请输入文本内容...',
				type: 'textarea'
			}),
			area.jsInput({
				label: '长度限制',
				name: 'input7',
				placeholder: '请输入文本内容...',
				type: 'textarea',
				maxlength: "30",
				'show-word-limit': true
			})
		)

		const area1 = tree.initArea({ title: '级联选择器' })
		area1.add(
			area1.jsCascader({
				label: '本地级联',
				name: 'cascader1',
				options: new Promise(resolve => {
					//模拟异步获取级联数据
					setTimeout(() => resolve([{
						value: '1-1',
						label: '第一级',
						children: [{
							value: '2-1',
							label: '第一级第一条',
						}, {
							value: '2-2',
							label: '第一级第二条',
						}]
					}, {
						value: '1-2',
						label: '第二级',
						children: [{
							value: '2-1',
							label: '第二级第一条',
						}, {
							value: '2-2',
							label: '第二级第二条',
						}]
					}]), 2000)
				})
			})
		)

		let id = 0;
		area1.addNode(
			area1.jsCascader({
				label: '异步加载',
				name: 'syncCascader',
				span: 16,
				style: { marginRight: '.5rem' },
				attrs: {
					//此处的props属性和render的配置属性props产生了冲突,所以必须配置到attrs中
					props: {
						lazy: true,
						lazyLoad({ level }, resolve) {
							setTimeout(() => {
								const nodes = Array.from({
									length: level + 1
								}).map(() => ({
									value: ++id,
									label: `选项${id}`,
									leaf: level >= 2
								}));
								// 通过调用resolve将子节点数据返回，通知组件数据加载完成
								resolve(nodes);
							}, 500);
						}
					}
				}
			}),
			area1.jsButton({
				innerText: '操作按钮'
			})
		)

		const area2 = tree.initArea({ title: '下拉框组件' })
		area2.add(
			area2.jsSelect({
				label: '基础下拉',
				name: 'select1',
				//用于禁用默认的mapping字段转化
				options: [{
					value: 1,
					label: '语文'
				}, {
					value: 2,
					label: '数学'
				}]
			}),
			area2.jsSelect({
				label: '基础数据',
				name: 'select2',
				options: 'sex'
			}),
			area2.jsSelect({
				label: '异步数据',
				name: 'select3',
				//将数据字段转化，参考elementUI
				changeOption: {
					value: 'Id',
					label: 'Value',
					i18nPathOption: 'demo.mock'
				},
				options: new Promise(resolve => {
					this.httpBack(this.$jiess.api.GetSelectData({
						key: 'param'
					}), res => resolve(res.data))
				})
			})
		).addNode(
			area2.jsSelectGroup({
				label: '分组下拉',
				name: 'select4',
				span: 16,
				style: { marginRight: '.5rem' },
				//用于禁用默认的mapping字段转化
				groups: [{
					label: '热门城市',
					options: [{
						value: 'Shanghai',
						label: '上海'
					}, {
						value: 'Beijing',
						label: '北京'
					}]
				}, {
					label: '城市名',
					options: [{
						value: 'Chengdu',
						label: '成都'
					}, {
						value: 'Shenzhen',
						label: '深圳'
					}, {
						value: 'Guangzhou',
						label: '广州'
					}, {
						value: 'Dalian',
						label: '大连'
					}]
				}]
			}),
			area2.jsButton({
				innerText: '操作按钮'
			})
		)

		const area3 = tree.initArea({ title: '时间选择器' })
		area3.add(
			area3.jsTime({
				label: '选择时间',
				name: 'jsTime',
				'picker-options': {
					start: '08:30',
					step: '00:15',
					end: '18:30'
				},
				rule: ['required']
			})
		).addNode(
			area3.jsTimeRange({
				label: '时间范围',
				name: 'jsTimeRange',
				rule: ['required'],
				span: 16,
				'arrow-control': true,
				style: { marginRight: '.5rem' },
				'range-separator': lan.call(this, "至")
			}),
			area3.jsButton({
				innerText: '操作按钮'
			})
		)


		const area4 = tree.initArea({ title: '日期选择器' })
		area4.add(
			area4.jsDate({
				label: '选择日期',
				name: 'jsData',
				type: "date",
				rule: ['required'],
			})
		).addNode(
			area4.jsDate({
				label: '日期范围',
				name: 'jsDataRange',
				type: "daterange",
				span: 16,
				rule: ['required'],
				style: { marginRight: '.5rem' },
				'range-separator': lan.call(this, "至")
			}),
			area4.jsButton({
				innerText: '操作按钮',
				click: e => console.log(e)
			})
		)

		const area5 = tree.initArea({
			title: '开关'
		})
		area5.add(area5.jsSwitch({
				label: '一号开关',
				name: 'switch0',
			}),
			area5.jsSwitch({
				label: '二号开关',
				name: 'switch1',
				'active-color': "#13ce66",
				'inactive-color': "#568BFC",
				'active-text': lan.call(this, "按月付费"),
				'inactive-text': lan.call(this, "按年付费")
			}))


		const area6 = tree.initArea({ title: '单选框' })

		area6.add(

			area6.jsRadio({
				label: '选项一',
				name: 'radio1',
				innerText: '备选项一'
			}),
			area6.jsRadio({
				label: '选项二',
				name: 'radio2',
				innerText: '备选项二'
			}),
			area6.jsRadio({
				label: '选项三',
				name: 'radio3',
				innerText: '备选项三'
			})
		)

		const area11 = tree.initArea({ title: '单选组' })
		const groups11 = [{
			label: '选项一',
			value: 1,
		}, {
			label: '选项二',
			value: 2,
		}, {
			label: '选项三',
			value: 3,
		}]
		area11.add(
			area11.jsRadioGroup({
				label: '单项选择',
				name: 'radioGroup0',
				groups: groups11,
				initValue: 2,
				span: 24
			})
		)


		const area7 = tree.initArea({ title: '多选框' })

		area7.add(
			area7.jsCheckbox({
				label: '普通',
				name: 'checkbox0',
			}),
			area7.jsCheckbox({
				label: '边框',
				name: 'checkbox1',
				border: true
			}),
			area7.jsCheckbox({
				label: '半选',
				name: 'checkbox2',
				indeterminate: true
			})
		)

		const area8 = tree.initArea({ title: '多选组' })
		const groups8 = [{
			label: '北京',
			value: 1
		}, {
			label: '上海',
			value: 2
		}, {
			label: '广州',
			value: 3
		}, {
			label: '深圳',
			value: 4
		}, {
			label: '成都',
			value: 5
		}, {
			label: '重庆',
			value: 6
		}]

		area8.add(
			area8.jsCheckboxGroup({
				label: '选择城市',
				name: 'checkboxGroup0',
				initValue: [1, 2],
				groups: groups8,
				//widthLen为0即占据整个宽度
				span: 24
			})
		)

		if (this.ui === 'element') {
			//elementUI中独有
			area8.add(
				area8.jsCheckboxGroup({
					label: '选择城市',
					name: 'checkboxGroup1',
					initValue: [1, 2],
					changeOption: {
						is: 'el-checkbox-button'
					},
					groups: groups8,
					span: 24,
				})
			)
		}
	}
}
